<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
		<title>Document</title>
		<style>
			/*最外层容器样式*/
			
			.wrap {
				width: 500px;
				display: flex;
				flex-direction: column;
				position: fixed;
				left: 30%;
				top: 50%;
				transform: translateX(-50%) translateY(-50%);
			}
			/*得到立方体效果*/
			
			.cube {
				width: 50px;
				height: 50px;
				margin: 0 auto;
				transform-style: preserve-3d;
				/*设置动画播放样式:动画对象 播放速度 时间 播放次数*/
				animation: rotate linear 20s infinite;
			}
			/*动画旋转的方式*/
			/*得到动画效果*/
			
			@-moz-keyframes rotate {
				/*firefox*/
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			
			@-webkit-keyframes rotate {
				/*sofari chrome*/
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			
			@-o-keyframes rotate {
				/*opera*/
				from {
					transform: rotateX(0deg) rotateY(0deg);
				}
				to {
					transform: rotateX(360deg) rotateY(360deg);
				}
			}
			/*每张图片的样式*/
			
			.cube div {
				position: absolute;
				width: 200px;
				height: 200px;
				opacity: 0.8;
				/*过渡效果*/
				transition: all .4s;
			}
			/*定义所有图片样式*/
			
			.pic {
				width: 200px;
				height: 200px;
			}
			
			.cube .out_front {
				transform: rotateY(0deg) translateZ(100px);
			}
			
			.cube .out_back {
				transform: translateZ(-100px) rotateY(180deg);
			}
			
			.cube .out_left {
				transform: rotateY(-90deg) translateZ(100px);
			}
			
			.cube .out_right {
				transform: rotateY(90deg) translateZ(100px);
			}
			
			.cube .out_top {
				transform: rotateX(90deg) translateZ(100px);
			}
			
			.cube .out_bottom {
				transform: rotateX(-90deg) translateZ(100px);
			}
			/*定义小正方体样式*/
			
			.cube span {
				display: block;
				width: 100px;
				height: 100px;
				position: absolute;
				top: 50px;
				left: 50px;
			}
			
			.cube .in_pic {
				width: 100px;
				height: 100px;
			}
			
			.cube .in_front {
				transform: rotateY(0deg) translateZ(50px);
			}
			
			.cube .in_back {
				transform: translateZ(-50px) rotateY(180deg);
			}
			
			.cube .in_left {
				transform: rotateY(-90deg) translateZ(50px);
			}
			
			.cube .in_right {
				transform: rotateY(90deg) translateZ(50px);
			}
			
			.cube .in_top {
				transform: rotateX(90deg) translateZ(50px);
			}
			
			.cube .in_bottom {
				transform: rotateX(-90deg) translateZ(50px);
			}
			/*鼠标移入后样式*/
			
			.cube:hover .out_front {
				transform: rotateY(0deg) translateZ(200px);
			}
			
			.cube:hover .out_back {
				transform: translateZ(-200px) rotateY(180deg);
			}
			
			.cube:hover .out_left {
				transform: rotateY(-90deg) translateZ(200px);
			}
			
			.cube:hover .out_right {
				transform: rotateY(90deg) translateZ(200px);
			}
			
			.cube:hover .out_top {
				transform: rotateX(90deg) translateZ(200px);
			}
			
			.cube:hover .out_bottom {
				transform: rotateX(-90deg) translateZ(200px);
			}
			
			body {
				background-image: url(./img/backimg.jpg);
				background-repeat: no-repeat;
				background-attachment: fixed;
				background-position: center;
				background-size: cover;
				background-origin: border-box;
				display: flex;
				flex-direction: row;
			}
			
			.jumbotron {
				background-color: rgba(0, 140, 255, 0.89);
				margin: 0%;
				padding: 0%;
				height: ;
			}
			
			.right {
				background-color: rgb(215, 234, 250);
			}
			
			#right{
				position: absolute;
				background:rgb(0,0,0,0.8);
				right: 10%;
				top: 50%;
				transform: translateY(-50%);
				width: 300px;
				height: 500px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/  
    writing-mode: tb-lr;/*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/  
			}
			#fabu{
				padding: 0px 0px 40px 0px ;
				font-family: "新宋体";
				font-size: 2.8em ;
				text-align: center;
				color: white;
			}
			#p{
				padding: 0px 0px 100px 0px ;
				font-family: "新宋体";
				font-size: 1.5em ;
				text-align: center;
				color: white;
			}
		</style>

	</head>

	<body>
			<div class="wrap">
				<!--部署内外层图片-->
				<div class="cube">
					<!--前面图片 -->
					<div class="out_front">
						<img src="../72496509_p0_square1200.jpg" class="pic">
					</div>
					<!--后面图片 -->
					<div class="out_back">
						<img src="../73263555_p0_square1200.jpg" class="pic">
					</div>
					<!--左面图片 -->
					<div class="out_left">
						<img src="../74870845_p0_square1200.jpg" class="pic">
					</div>
					<!--右面图片 -->
					<div class="out_right">
						<img src="../78591529_p0_square1200.jpg" class="pic">
					</div>
					<!--上面图片 -->
					<div class="out_top">
						<img src="../78809144_p0_square1200.jpg" class="pic">
					</div>
					<!--下面图片 -->
					<div class="out_bottom">
						<img src="../79324023_p0_custom1200.jpg" class="pic">
					</div>

					<!--小正方体 -->
					<span class="in_front">
                    <img src="../85158947_p0_square1200.jpg" class="in_pic">
                </span>
					<span class="in_back">
                     <img src="../85282480_p0_square1200.jpg" class="in_pic">
                </span>
					<span class="in_left">
                    <img src="../85338334_p0_square1200.jpg" class="in_pic">
                </span>
					<span class="in_right">
                    <img src="../86286832_p0_square1200.jpg" class="in_pic">
                </span>
					<span class="in_top">
                    <img src="../86800853_p0_square1200.jpg" class="in_pic">
                </span>
					<span class="in_bottom">
                    <img src="..//87469406_p0_square1200.jpg" class="in_pic">
                </span>
				</div>
			</div>
			<div id="right">
				<span  id="fabu"><h1>发布成功</h1></span>
				<span id="p">
					艺术是花 美丽处处可见<br/> 艺术是雪 洁白纯洁让人永生难忘<br/>艺术是海  其中藏着无数珍宝 <br/>艺术..
				</span>
			</div>
	</body>
</html>